<!--
数据
   data:[
   {k:'',v:''}
   ]
key-name:"k"
value-name:"v"
-->

<template>
  <div class="mc-map">
        <el-form size="mini">
            <el-form-item v-if="!data || data.length<=0">
                 <el-button size="mini" @click="addParam(0)">新增</el-button>
            </el-form-item>
            <el-form-item>
            <el-row>
                  <el-col :span="8">
                      {{keyPlaceholder}}
                  </el-col>
                  <el-col :span="8">
                       {{valuePlaceholder}}
                  </el-col>
                  <el-col :span="8">
                      操作
                  </el-col>
            </el-row>
        </el-form-item>
          <template v-for="(item,idx) in data">
              <el-form-item>
                  <el-row>
                        <el-col :span="8">
                            <el-input v-model="item[keyName]" @blur="keyBlur(item)" :placeholder="keyPlaceholder">
                            </el-input>
                        </el-col>
                        <el-col :span="8">
                             <el-input v-model="item[valueName]" :placeholder="valuePlaceholder">
                             </el-input>
                        </el-col>
                        <el-col :span="8">
                            <el-button-group style="margin-top:-2px">
                                <el-button size="mini" @click="addParam(idx)">+</el-button>
                                <el-button size="mini" @click="deleteParam(idx)">-</el-button>
                             </el-button-group>
                        </el-col>
                  </el-row>
              </el-form-item>
          </template>
          <el-form-item>
               <el-button size="mini" @click="saveData()" type="primary">保存</el-button>
          </el-form-item>
        </el-form>
  </div>
</template>

<script>
export default {
    name: 'mc-key-value-list',
    data () {
        return {
        }
    },
    props:{
        'data':{type:Array},
        'keyPlaceholder':{type:String},
        'valuePlaceholder':{type:String},
        'keyName':{type:String,default:"k"},
        'valueName':{type:String,default:"v"},
        'keyIsInt':{type:Boolean,default:false}
    },
    mounted () {

    },
    methods:{
        buildOneParam:function(){
            var obj = {};
            obj[this.keyName] = "";
            obj[this.valueName] = "";
            return obj;
        },
        addParam:function(idx){
            this.data.splice(idx+1,0,this.buildOneParam())
        },
        deleteParam:function(idx){
            this.data.splice(idx,1)
        },
        keyBlur:function(item){
            if(this.keyIsInt){
                var v = item[this.keyName]
                if(v && !(/^([0-9]+)$/.test(v))){
                  this.$message({type:"error",message:"请输入数字"});
                  item[this.keyName]="";
                }
            }
        },
        saveData:function(){
            for(var i=0;i<this.data.length;i++){
                var item = this.data[i];
                if(this.keyIsInt){
                    item[this.keyName] = parseInt(item[this.keyName]);
                }
            }
            this.$emit("save-data",this.data)
        }
    }
}
</script>

<style lang="scss">
    .mc-api-param {
        .el-form-item{
            margin-top:10px;
        }
        .el-select{
            width:99%;
        }
    }

</style>
